<template>
  <div class="wrapper" style="overflow: hidden;">
    <div style="width: 200px; height: 200px; background-color: red;"></div>
    <div style="width: 200px; height: 200px; background-color: red;"></div>
    <EcahtrsOne></EcahtrsOne>
    <EcahtrsTwo></EcahtrsTwo>
    <EcahtrsFour></EcahtrsFour>
  </div>
</template>
<script setup>
import createLazyLoadComp from '@/utils/createLazyLoadComp'
import EcahtrsBase from './EcahtrsBase.vue'
import { EchartsOneStore, EchartsTwoStore, EchartsFourStore } from '@/store/EchartsStore/EchartsOne'

const store1 = new EchartsOneStore()
const store2 = new EchartsTwoStore()
const store4 = new EchartsFourStore()
const EcahtrsOne = createLazyLoadComp({comp: EcahtrsBase, store: store1})
const EcahtrsTwo = createLazyLoadComp({comp: EcahtrsBase, store: store2})
const EcahtrsFour = createLazyLoadComp({comp: EcahtrsBase, store: store4})

</script>